<template>
  <div class="uploader-list">
    <slot :file-list="fileList">
      <ul>
        <li v-for="file in fileList" :key="file.id">
          <uploader-file :file="file" :list="true"></uploader-file>
        </li>
        <div class="no-fille" v-show="!fileList.length">
          <a-empty description="尚未上传附件"></a-empty>
        </div>
      </ul>
    </slot>
  </div>
</template>

<script>
import { uploaderMixin } from 'vue-simple-uploader/src/common/mixins'
import UploaderFile from './file.vue'

const COMPONENT_NAME = 'uploader-list'

export default {
  name: COMPONENT_NAME,
  mixins: [uploaderMixin],
  computed: {
    fileList () {
      return this.uploader.fileList
    }
  },
  components: {
    UploaderFile
  }
}
</script>
<style lang="less">
  .uploader-list {
    .no-fille {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
  }
</style>
